<template>
	<view class="page">

		<cu-custom bgColor="bg-F7F7F7" :isBack="true" textRight="true" type="custom-recuit">
			<block slot="backText">
				<view class="titilestyle">
					{{title}}
				</view>


			</block>
		</cu-custom>

		<view class="content">

			<scroll-view scroll-x="true" class="scroll-view-tab">
				<view class="tab-box flex middle">
					<view class="item " v-for="(tab,index) in app" :key="index"
						:class="tabIndex==index?'hover':'nohover'" @click="changeTab(index)">
						{{tab.name}}
					</view>

				</view>
			</scroll-view>
			<view class="list">
				<mescroll-body bottom="20%" height="80%" class="mescroll-body select-box" ref="mescrollRef"
					@init="mescrollInit" @down="downCallback" @up="upCallback">
					<!-- <scroll-view scroll-y="true" class="select-box"> -->
					<view class="item  flex  flex-direction " v-for="(item,i) in list" :key="i" @click="changeItem(i)">
						<view class="first-child  flex ">
							<view class="flex  align-center basis-xl">
								<view class="round middle">
									<image :src="res+'/static/laundry/xiyi.png'" mode="heightFix"></image>

								</view>
								<text class="name">{{item.name}}</text>
								<text>No.{{item.sno}}</text>

							</view>
							<view class="basis-xs text-black align-center flex justify-end">

								<text class="" v-if="item.status==1">已完成</text>
								<text class="text-blue" v-if="item.status==2">清洗中</text>
								<text class="text-red" v-if="item.status==0">待支付</text>
								<text class="text-yellow" v-if="item.status==3">待收取</text>

							</view>


						</view>

						<view class="scend-child  flex">
							<view class="left basis-xl flex flex-direction">
								<text>{{item.create_time}}</text>
								<text>{{item.address}}</text>
							</view>
							<view class="right  basis-xs flex align-end justify-end">
								￥<text>{{item.price}}</text>
							</view>
						</view>

						<view class="bottom flex justify-between">
							<view class="">
								洗衣模式 <text class="text-black">{{item.pattern}}</text>
							</view>
							<view class="" v-if="item.status==2">
								剩余时间 <text class="text-blue">{{item.time}}</text>
							</view>
							<view class="" v-if="item.status==1">
								订单耗时 <text class="text-black">{{item.useTime}}</text>
							</view>
						</view>


					</view>

				</mescroll-body>


			</view>







		</view>





	</view>
</template>

<script>
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	
	import {
		getOrderList
	} from "@/static/laundry/api.js"
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody,
		},
		data() {
			return {
				title: "",
				tabIndex: 0,
				res: this.apiHost + "/static/otherApp/",
				app: [{
						name: "全部订单",
						status: 0

					},
					{
						name: "清洗中",
						status: 2
					},
					{
						name: "待收取",
						status: 3
					},
					{
						name: "已完成",
						status: 1
					},
					{
						name: "已取消",
						status: 4
					}
				],
				itemIndex: 0,
				item: {
					price: 0,
				},
				list: null,


			}
		},
		methods: {
			changeTab(i) {
				this.tabIndex = i;
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			/**
			 * 
			 */
			jumpTo(path) {
				uni.navigateTo({
					url: path
				})
			},

			upCallback(page) {
				getOrderList(page.num, page.size, this.app[this.tabIndex].status).then(curPageData => {
					console.log(curPageData)
					this.mescroll.endSuccess(curPageData.length);
					if (page.num == 1) this.list = [];
					this.list = this.list.concat(curPageData);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},

		}







	}
</script>

<style lang="scss" scoped>
	.bg-F7F7F7{
		background-color: #F7F7F7;
	}
	.content {
		$w: calc(100vw*(670/750));
		$marginLR: calc(100vw*(40/750));
		font-family: PingFang SC;

		.scroll-view-tab {
			position: relative;
			height: calc(100vw*(60/750));
			.tab-box {
				width: 100vw;
				padding-left: 40rpx;
				padding-right: 40rpx;
				position: fixed;
				z-index: 999;
				background-color: #F7F7F7;
				.item {
					white-space: nowrap;
					padding: 20rpx 30rpx;
				}

				.hover {
					font-size: 32rpx;
					font-weight: 800;
					color: #333333;
				}

				.nohover {
					font-size: 28prx;
					font-weight: 500;
					color: #999999;
				}
			}

		}

		.list {
			width: $w;
			margin: 0rpx $marginLR;

			.select-box {
				.item {
					padding: 25rpx 30rpx;
					margin-top: 20rpx;
					min-height: calc(100vw*(260/750));
					box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
					padding: 40rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					font-weight: 800;


					.first-child {
						.round {
							background: #1270E0;
							width: calc(100vw*(40/750));
							height: calc(100vw*(40/750));
							image{
								width: inherit;
								margin: auto;
								height: calc(100vw*(38/750));
							}
						}

						.name {
							font-weight: 800;
							color: #333333;
							margin: 0 20rpx;
						}

						font-size: 28rpx;
						font-weight: 500;
						color: #999999;


					}

					.scend-child {
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 16rpx;
						color: #999999;

						.left {
							text {
								margin-top: 16rpx;
							}
						}

						.right {
							text {
								font-size: 50rpx;
								font-weight: 800;
							}

							font-size: 32rpx;


							color: #333333;
						}

						.cuIcon-time {
							font-size: 32rpx;
						}

						text {
							margin-left: 10rpx;
						}

						.desc {
							margin-left: 40rpx;
							font-weight: 500;
						}
					}


					.bottom {
						margin-top: 40rpx;
						color: #999999;
						font-weight: 500;

						text {
							margin-left: 19rpx;
							font-weight: 800;

						}
					}

				}







			}
		}
	}
</style>
